<template>
  <div class="basic-data-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <h3>常规数据管理</h3>
          <el-button type="primary" @click="handleAdd">新增数据</el-button>
        </div>
      </template>

      <el-table :data="dataList" border v-loading="loading">
        <el-table-column prop="id" label="ID" width="80" align="center" />
        <el-table-column prop="title" label="名称" />
        <el-table-column prop="name" label="标识符" />
        <el-table-column prop="status" label="状态" width="80" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
              {{ scope.row.status === 1 ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 新增/编辑对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px" @close="handleClose">
      <el-form :model="formData" :rules="rules" ref="formRef" label-width="80px">
        <el-form-item label="名称" prop="title">
          <el-input v-model="formData.title" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="标识符" prop="name">
          <el-input v-model="formData.name" placeholder="请输入标识符" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch
            v-model="formData.status"
            :active-value="1"
            :inactive-value="0"
            active-text="启用"
            inactive-text="禁用"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import type { FormInstance, FormRules } from 'element-plus'

  interface BasicDataItem {
    id: number
    title: string
    name: string
    status: number
  }

  const dataList = ref<BasicDataItem[]>([])
  const loading = ref(false)
  const dialogVisible = ref(false)
  const dialogTitle = ref('')
  const formRef = ref<FormInstance>()

  const formData = reactive({
    id: 0,
    title: '',
    name: '',
    status: 1,
  })

  const rules: FormRules = {
    title: [{ required: true, message: '请输入名称', trigger: 'blur' }],
    name: [{ required: true, message: '请输入标识符', trigger: 'blur' }],
  }

  // 加载数据列表
  const loadDataList = async () => {
    loading.value = true
    try {
      // 模拟API调用
      await new Promise(resolve => setTimeout(resolve, 500))
      dataList.value = [
        { id: 1, title: '数据类型1', name: 'type1', status: 1 },
        { id: 2, title: '数据类型2', name: 'type2', status: 1 },
        { id: 3, title: '数据类型3', name: 'type3', status: 0 },
      ]
    } catch (error) {
      ElMessage.error('加载数据失败')
    } finally {
      loading.value = false
    }
  }

  // 处理新增
  const handleAdd = () => {
    dialogTitle.value = '新增数据'
    formData.id = 0
    formData.title = ''
    formData.name = ''
    formData.status = 1
    dialogVisible.value = true
  }

  // 处理编辑
  const handleEdit = (row: BasicDataItem) => {
    dialogTitle.value = '编辑数据'
    Object.assign(formData, row)
    dialogVisible.value = true
  }

  // 处理删除
  const handleDelete = async (row: BasicDataItem) => {
    try {
      await ElMessageBox.confirm(`确定要删除"${row.title}"吗？`, '提示', {
        type: 'warning',
      })
      ElMessage.success('删除成功')
      loadDataList()
    } catch {
      // 用户取消
    }
  }

  // 处理提交
  const handleSubmit = async () => {
    if (!formRef.value) return

    await formRef.value.validate(async valid => {
      if (valid) {
        try {
          // 模拟API调用
          await new Promise(resolve => setTimeout(resolve, 500))
          ElMessage.success(formData.id ? '更新成功' : '新增成功')
          dialogVisible.value = false
          loadDataList()
        } catch (error) {
          ElMessage.error('操作失败')
        }
      }
    })
  }

  // 处理关闭对话框
  const handleClose = () => {
    if (formRef.value) {
      formRef.value.resetFields()
    }
  }

  onMounted(() => {
    loadDataList()
  })
</script>

<style scoped>
  .basic-data-container {
    padding: 20px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .card-header h3 {
    margin: 0;
  }
</style>
